<template>
  <div class="content">
    <div class="title">那年今日</div>
    <div class="lbt">
      <el-carousel height="400px" type="card" :autoplay="true">
        <el-carousel-item
          v-for="item in pictures"
          :key="item.id"
          style="background: #eee; border-radius: 16px"
        >
          <el-image :src="item.url" fit="fill"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const pictures = ref([
  {
    id: 1,
    url: 'https://www.helloimg.com/i/2024/12/23/67691fba09e22.jpg',
  },
  {
    id: 2,
    url: 'https://www.helloimg.com/i/2024/12/23/67691fba321e2.jpg',
  },
  {
    id: 3,
    url: 'https://www.helloimg.com/i/2024/12/23/67691fba60587.jpg',
  },
  {
    id: 4,
    url: 'https://www.helloimg.com/i/2024/12/23/67691fba6361c.jpg',
  },
])
</script>
<style scoped lang="scss">
.content {
  .title {
    font-weight: bold;
    font-size: 50px;
    margin-bottom: 15px;
  }
}
</style>
